<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="layouts/master(title='学生列表')">   <!--layout文件路径-->
<th:block th:fragment="css">
    <!--如果没有内容，请保持-->
    <style>
        /* 标题居中 */
        h2 {
            text-align: center;
        }
        /* 表格样式 */
        table {
            margin: 0 auto;  /*居中*/
            border-collapse: collapse; /* 合并边框 */
            width: 80%; /* 设置表格宽度 */
            border: 1px solid #8d8b8b; /* 设置整个表格的边框 */
        }
        th, td {
            border: 1px solid #ddd; /* 设置单元格边框 */
            padding: 8px; /* 设置内边距 */
            text-align: left; /* 文本左对齐 */
        }
        th {
            background-color: #d2d0d0; /* 设置表头背景颜色 */
            border-bottom: 2px solid #ddd; /* 设置表头底部边框 */
        }
        /* 设置偶数行背景色 */
        tr:nth-child(even) {
            background-color: #d8ebd8; /* 设置偶数行背景色 */
            border-top: 1px solid #ddd; /* 添加顶部边框 */
            border-bottom: 1px solid #ddd; /* 添加底部边框 */
        }
        /* 表单容器样式 */
        .form-container {
            display: flex; /* 使用 flexbox 布局 */
            justify-content: center; /* 在水平方向上居中 */
            margin-top: 50px; /* 垂直间距 */
            margin-bottom: 30px; /* 添加与下方内容的间距 */
        }
        /* 输入框样式 */
        input[type="text"] {
            padding: 10px; /* 设置内边距 */
            border: 1px solid #ccc; /* 设置边框 */
            border-radius: 5px; /* 添加圆角 */
            box-sizing: border-box; /* 让内边距和边框大小不影响元素的总宽度 */
        }
        /* 按钮样式 */
        button {
            background-color: #4CAF50; /* 设置按钮背景颜色 */
            color: white; /* 设置文字颜色 */
            padding: 10px; /* 设置内边距 */
            border: none; /* 移除边框 */
            border-radius: 5px; /* 添加圆角 */
            cursor: pointer; /* 添加鼠标悬停样式 */
            box-sizing: border-box; /* 让内边距和边框大小不影响元素的总宽度 */
        }
        /* 按钮悬停效果 */
        button:hover {
            background-color: #45a049; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</th:block>

<div th:fragment="content">
    <h2>学生列表</h2>
    <div class="form-container">
        <form action="#" method="get" th:action="@{/student/list}" th:object="${searchForm}" style="display: inline-block;">
            <input type="text" th:field="*{name}" placeholder="输入姓名查询学生信息"/>
            <button type="submit">查询</button>
        </form>
    </div>
    <table>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>性别</th>
            <th>年龄</th>
            <th>分数</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用Thymeleaf的迭代器来遍历学生信息 -->
        <tr th:each="student : ${students}">
            <td th:text="${student.no}">No</td>
            <td th:text="${student.name}">Name</td>
            <td th:text="${student.password}">Password</td>
            <td th:text="${student.sex}">Sex</td>
            <td th:text="${student.age}">Age</td>
            <td th:text="${student.score}">Score</td>
        </tr>
        </tbody>
    </table>

</div>
<div th:fragment="scripts">
    <!--如果没有内容，请保持-->
<!--    <script type="text/javascript" src="/pagejs/student/list.js"></script>-->
</div>

</html>

